<template>
	<view class="header_custom">
		<view class="status_bar" :style="{ height: `${systemInfo.statusBarHeight}px` }"></view>
		<view class="header" :style="{
				'padding-right': `${menuButtonInfo.width + 10}px`,
				'min-height': `${(menuButtonInfo.top - systemInfo.statusBarHeight) * 2 + menuButtonInfo.height}px`
			}">
			<view class="nav_bar">
				<view class="left" v-if="pageBack" @click="gotoBack">
					<uni-icons type="left" size="30" :color="pageBackColor"></uni-icons>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'headerCustom',
		data() {
			return {
				menuButtonInfo: {},
				systemInfo: {},
			}
		},
		props: {
			pageBack: {
				type: Boolean,
				default: false
			},
			pageBackColor: {
				type: String,
				default: '#000'
			}
		},
		created() {
			//获取设备系统信息并存储到全局变量
			this.systemInfo = uni.getSystemInfoSync();
			console.log()
			//获取右上角胶囊按钮尺寸信息并存储到全局变量
			this.menuButtonInfo = uni.getMenuButtonBoundingClientRect();
		},
		methods: {
			gotoBack() {
				uni.navigateBack()
			}
		}
	}
</script>

<style lang="scss" scoped>
	.header {
		position: relative;

		.nav_bar {
			position: absolute;
			width: 100%;
			height: 100%;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.left {
				height: 100%;
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}

	}
</style>